<template>
	<zui-box>

	<!-- 头部导航 -->
	<zui-navbar :title='the_title'></zui-navbar>
	<u-gap height="30rpx"></u-gap>
	
		<!-- 页面主体 -->
		<mescroll-body :height="mescroll_height +'px'" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption">
	<view class="list">
		<view class="item" v-for="(item, index) in list" :key="index" @click="go_to(item)">
			<image :src="item.goods_thumb" class="image"></image>
			<view class="content">
				<view class="title ">{{item.goods_name}}</view>
				<view class="small_text ">¥{{Math.trunc(item.goods_price)}}</view>
			</view>
		</view>
	</view>
	
	
	</mescroll-body>
	
	</zui-box>
</template>
<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	export default {
		mixins: [MescrollMixin,uni.$u.mpMixin, uni.$u.mixin],
		data() {
			return {
				cat_id:'',//商品分类id
				goods_name:'',//商品搜索名称
				module_id:'',//商品商品id
				the_title:'商品列表',
				list: [],
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					auto: false // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
				},
				mescroll_height:''
				
			}
		},
		created() {
			let that = this;
			   uni.getSystemInfo({ 
				success(res) {
				console.log('一',res.windowHeight); //可使用窗口高度
				that.mescroll_height = res.windowHeight - that.$u.getPx(uni.$u.props.navbar.height) - that.$u.sys().statusBarHeight -80
				
				console.log('二',that.mescroll_height)
				}
			})
		},
		onLoad(e){
			console.log(e)
			this.cat_id = e.cat_id||'';
			this.the_title = e.name||'';
			this.goods_name= e.goods_name||'';
			this.module_id= e.module_id||'';
			// 获取到参数后执行下拉刷新
			this.$nextTick(()=>{
				this.mescroll.resetUpScroll();
			})
		},
		methods: {
			go_to(item){
				uni.navigateTo({ url: '/pages/one_mouth/good_item?id='+item.id });
			},
			
			// 
			//下拉刷新的回调, 重置列表为第一页 (此处可删,mixins已默认)
			downCallback() {
				setTimeout(() => {
					this.mescroll.resetUpScroll();
				}, 1000);
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				
				let obj = {}
				
				if(this.cat_id){
					obj.cat_id= this.cat_id
				}
				if(this.module_id){
					obj.module_id= this.module_id
				}
				
				
				uni.$u.http
					.get('/app/product/list',{
						params: obj,
						custom: {
							auth: true,
							toast: false,
							catch: false,
						},
					},
					)
					.then(res => {
						console.log('返回的数据', res.list);
						this.mescroll.endSuccess(res.list.length);
						//设置列表数据
						if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
						this.list = this.list.concat(res.list); //追加新数据
			
					})
					.catch(res => {
						this.mescroll.endErr();
					});
			},
		}
	}
</script>
<style lang="scss" scoped>
	/* //空数据 */
		/deep/.mescroll-empty {
			box-sizing: border-box;
			width: 100%;
			padding: 400rpx 50rpx;
			text-align: center;
		}
	//自定义顶部栏
	.navbar {
		font-size: 30rpx;
		.title {
			color: #fff;

		}

		/deep/.u-icon {
			padding: 10rpx;
			border-radius: 50%;
			// background:rgba(35 ,159 ,229,0.85);
		}
	}

	//顶部栏
	.grace-header-content {
		color: #fff;
	}

	.grace-search-tags {
		padding: 10rpx 0;
	}

	.grace-search-tags-items {
		padding: 5rpx 20rpx;
		border-radius: 30rpx;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
		font-size: 24rpx;
		line-height: 40rpx;
		border-width: 1px;
		border-style: solid;
		border-color: #F1F1F1;
		color: #A5A7B2;
		font-size: 26rpx;
	}
	
	
	//轮播图
	 .grace-swiper {
		height: 300rpx;
	}
	
	.grace-swiper-item {
		height: 280rpx;
	}
	
	.swiper-image {
		margin:0 auto;		
			width: 670rpx;
		height: 280rpx;
		border-radius: 20rpx;
		
		
		display:block;		
		
	}
	
	.swiper3 {
		height: 360rpx !important;
	}
	
	
	// 九宫格
	.grace-grids {
		padding-left: 25rpx;
		display: flex;
		flex-wrap: wrap;
		// justify-content: center;
	}
	
	
	/* 演示了如何修改组件宽度 */
	.five>.grace-grids-items {
		width: 140rpx;
	}
	
	.grids-border-wrap {
		border-top: 1px solid #F1F2F3;
		border-left: 1px solid #F1F2F3;
	}
	
	.grids-border-item {
		border-bottom: 1px solid #F1F2F3;
		border-right: 1px solid #F1F2F3;
	}
	
	.grace-grids-text {
		color: #F1B863;
	}
	
	
	// 图标分类
	
	.list {
		width: 670rpx;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.item {
			box-sizing: border-box;
			padding: 30rpx;
			width: 322rpx;
			font-size: 28rpx;
			border-radius: 5px;
			position: relative;
			margin: 10rpx 0;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background: #fff;
		}
		.image {
			width: 260rpx;
			border-radius: 8rpx;
			height: 260rpx;
			flex-shrink: 0;
			margin-bottom: 30rpx;
		
		}
		.content {
			text-align: center;
			.title {
				color: #333333;
				line-height: 60rpx;
				font-size: 28rpx;
			}
			.small_text{
				color: #E63A2A;
				line-height: 60rpx;
				font-size: 26rpx;
			}
		}
		
		
	}
	
	
	
	
	
	
</style>
